<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>随风旅游</title>
  <link rel="stylesheet" href="css/index.css">
</head>
<body>
  <!--======================== header ========================= -->
  <div id="app">
    <div id="header">
      <div class="logo">
        <a href="">随风</a>
        <img src="images/index/logo.jpg" alt="">
      </div>
      <div class="nav">
        <ul>
          <li><a href="index.html">首页</a></li>
          <li><a href="product/pro_list.html">去旅行</a></li>
          <li><a href="customer/personal.html">个人中心</a></li>
          <a href="javascript:void(0)" class="box">
            <input type="text" class="box-search">
          </a>
          <div class="search-btn">
            <a class="btn" href="javascript:void(0)">
              <i class="icon-search"></i>
            </a>
          </div>
        </ul>
      </div>
      <div class="login">
        <a href="customer/login.html">登录</a>
        <span class="split">|</span>
        <a href="customer/registe.html">注册</a>
      </div>
    </div>
    <!--  ======================横幅 banner  ======================-->
    <div id="banner" class="banner">
      <img src="images/index/lun1.jpg" class="banner-image" id="bannerImage1" style="display: block;" />
      <img src="images/index/lun2.jpg" class="banner-image" id="bannerImage2" style="display: none;" />
      <img src="images/index/lun3.jpg" class="banner-image" id="bannerImage3" style="display: none;" />
      <img src="images/index/lun4.jpg" class="banner-image" id="bannerImage4" style="display: none;" />
    </div>

    <!--  ======================主体 main   ======================-->
    <div id="title">
      <h2>正在热卖</h2>
      <a href="javascript:void(0)" class="px">人气推荐</a>
      <a href="javascript:void(0)" class="px">一日游</a>
      <a href="javascript:void(0)" class="px">亲子游</a>
      <a href="javascript:void(0)" class="px">半日游</a>
    </div>
    <div id="main">
      <div class="list">
        <ul>
          <li>
            <a href="product/pro_details.html">
              <img src="images/index/pro1.jpg" alt="">
              <span class="text">九寨沟4日游川西纯玩·都江堰/四姑娘山/若尔盖花湖/黄龙（赠成都酒店1晚+双流专车接机/送机1次+九寨旅拍1次）</span>
              <span class="price">1488起</span>
            </a>
          </li>
          <li>
            <a href="">
              <img src="images/index/pro2.jpg" alt="">
              <span class="text">国庆价已出】云南丽江香格里拉梅里雪山雨崩徒步6日游·雨崩村冰湖+神瀑+尼农峡谷</span>
              <span class="price">1780起</span>
            </a>
          </li>
          <li>
            <a href="">
              <img src="images/index/pro3.jpg" alt="">
              <span class="text">西藏林芝波密5日游 探索秘境墨脱·雪山观景酒店 来古冰川+巴松措+雅鲁藏布大峡谷+然乌湖</span>
              <span class="price">2780起</span>
            </a>
          </li>
          <li>
            <a href="">
              <img src="images/index/pro1.jpg" alt="">
              <span class="text">九寨沟4日游川西纯玩·都江堰/四姑娘山/若尔盖花湖/黄龙（赠成都酒店1晚+双流专车接机/送机1次+九寨旅拍1次）</span>
              <span class="price">1488起</span>
            </a>
          </li>
          <li>
            <a href="">
              <img src="images/index/pro2.jpg" alt="">
              <span class="text">国庆价已出】云南丽江香格里拉梅里雪山雨崩徒步6日游·雨崩村冰湖+神瀑+尼农峡谷</span>
              <span class="price">1780起</span>
            </a>
          </li>
          <li>
            <a href="">
              <img src="images/index/pro3.jpg" alt="">
              <span class="text">西藏林芝波密5日游 探索秘境墨脱·雪山观景酒店 来古冰川+巴松措+雅鲁藏布大峡谷+然乌湖</span>
              <span class="price">2780起</span>
            </a>
          </li>
          <li>
            <a href="">
              <img src="images/index/pro1.jpg" alt="">
              <span class="text">九寨沟4日游川西纯玩·都江堰/四姑娘山/若尔盖花湖/黄龙（赠成都酒店1晚+双流专车接机/送机1次+九寨旅拍1次）</span>
              <span class="price">1488起</span>
            </a>
          </li>
          <li>
            <a href="">
              <img src="images/index/pro2.jpg" alt="">
              <span class="text">国庆价已出】云南丽江香格里拉梅里雪山雨崩徒步6日游·雨崩村冰湖+神瀑+尼农峡谷</span>
              <span class="price">1780起</span>
            </a>
          </li>
          <li>
            <a href="">
              <img src="images/index/pro3.jpg" alt="">
              <span class="text">西藏林芝波密5日游 探索秘境墨脱·雪山观景酒店 来古冰川+巴松措+雅鲁藏布大峡谷+然乌湖</span>
              <span class="price">2780起</span>
            </a>
          </li>
          <li>
            <a href="">
              <img src="images/index/pro3.jpg" alt="">
              <span class="text">西藏林芝波密5日游 探索秘境墨脱·雪山观景酒店 来古冰川+巴松措+雅鲁藏布大峡谷+然乌湖</span>
              <span class="price">2780起</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <!-- ====================== 底部 footer ====================== -->
    <div class="tl-container">
      <h2>心若自由&nbsp;行必无忧</h2>
    </div>
    <div class="footer">
      <ul class="footer-list">
        <li>
          <img src="images/index/footer1.jpg">
        </li>
        <li>
          <img src="images/index/footer2.jpg">
        </li>
        <li>
          <img src="images/index/footer3.jpg">
        </li>
        <li>
          <img src="images/index/footer4.jpg">
        </li>
        <li>
          <img src="images/index/footer5.jpg">
        </li>
        <li>
          <img src="images/index/footer6.jpg">
        </li>
        <li>
          <img src="images/index/footer7.jpg">
        </li>
        <li>
          <img src="images/index/footer8.jpg">
        </li>
        <li>
          <img src="images/index/footer9.jpg">
        </li>
        <li>
          <img src="images/index/footer10.jpg">
        </li>
        <li>
          <img src="images/index/footer11.jpg">
        </li>
        <li>
          <img src="images/index/footer12.jpg">
        </li>
      </ul>
      <div class="footer-text">
        <span>你可以,</span>
        到世界的角落去转转...
      </div>
    </div>
  </div>
</body>

</html>
<script src="js/index.js"></script>